<template>
  <div>
    <el-dialog title="设备列表" :visible.sync="show" width="1200px" :close-on-click-modal="false">
      <div style="display: flex; justify-content: space-between">
        <el-form :model="deviceParams" ref="deviceForm" size="small" inline label-width="68px" @submit.native.prevent>
          <el-form-item label="检查标准" prop="type">
            <el-select v-model="deviceParams.type" clearable placeholder="请选择检查标准" style="width: 240px">
              <el-option v-for="(item, index) in standardList" :key="index" :label="item.dictLabel"
                :value="item.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleDeviceQuery">搜索</el-button>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" size="mini" v-hasPermi="['manager:device:add']" @click="handleAdd">新增</el-button>
        </div>
      </div>
      <el-table v-loading="loading" :data="dataList">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column label="设备名称" align="center" prop="name" />
        <el-table-column label="检查周期" align="center">
          <template slot-scope="scope">
            <div>{{ cycleLabel(scope.row) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="检查标准" align="center">
          <template slot-scope="scope">
            <div>{{ getStandardLable(scope.row) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="视频指导描述" align="center" show-overflow-tooltip prop="videoGuidance" />
        <el-table-column label="参考视频" align="center" prop="referenceVideo">
          <template slot-scope="scope">
            <VideoBox :urls="scope.row.referenceVideo || ''" :systemId="systemId" :deviceId="scope.row.id"
              @uploadSuccess="getList" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleCheck(scope.row)">
              检查项
            </el-button>
            <el-button size="mini" type="text" v-hasPermi="['manager:device:edit']" @click="handleEdit(scope.row)">
              修改
            </el-button>
            <el-button size="mini" type="text" v-hasPermi="['manager:device:remove']" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="deviceTotal" :page.sync="deviceParams.pageNum" :limit.sync="deviceParams.pageSize"
        @pagination="getList" />
    </el-dialog>
    <el-dialog :title="(deviceForm.id ? '编辑' : '新增') + '设备'" :visible.sync="deviceFormShow" width="50%" append-to-body
      :close-on-click-modal="false">
      <el-form ref="deviceForm" :model="deviceForm" :rules="deviceRules" label-width="120px">
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="deviceForm.name" placeholder="请输入名称" clearable />
        </el-form-item>
        <el-form-item label="检查周期" prop="inspectionCycle">
          <el-select v-model="deviceForm.inspectionCycle" placeholder="请选择检查周期" style="width: 100%">
            <el-option v-for="(item, index) in cycleList" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="检查标准" prop="type">
          <el-select v-model="deviceForm.type" placeholder="请选择检查标准" style="width: 100%">
            <el-option v-for="(item, index) in standardList" :key="index" :label="item.dictLabel"
              :value="item.dictValue" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="视频指导描述" prop="videoGuidance">
          <el-input type="textarea" v-model="deviceForm.videoGuidance" :autosize="{ minRows: 4 }" maxlength="255" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="deviceCancel">取 消</el-button>
      </div>
    </el-dialog>
    <Inspection-dialog v-model="inspectionShow" :deviceId="deviceId" />
  </div>
</template>
<script>
import {
  getStandardList,
  listDevice,
  postDevice,
  updateDevice,
  delDevice,
} from "@/api/device/system.js";
import InspectionDialog from "@/views/device/system/cp/InspectionDialog.vue";
import VideoBox from "@/views/device/system/cp/VideoBox.vue";

export default {
  name: "Device",
  components: { InspectionDialog, VideoBox },
  data() {
    return {
      loading: true, // 加载中
      deviceParams: {
        type: "", // 检查标准
        systemId: "", // 系统ID
        pageNum: 1,
        pageSize: 10,
        systemId: null,
      },
      deviceTotal: 0, // 设备列表总条数
      //检查标准列表
      standardList: [],
      cycleList: [
        // 检查周期列表
        { value: "MONTH", label: "月" },
        { value: "QUARTER", label: "季" },
        { value: "YEAR", label: "年" },
        { value: "HALF_A_YEAR", label: "半年" },
        { value: "TWO_YEAR", label: "两年" },
      ],
      deviceForm: {
        id: null,
        name: null,
        inspectionCycle: null,
        maintenanceContent: null,
        // type: null,
        systemId: null,
      },
      deviceRules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        inspectionCycle: [
          { required: true, message: "检查周期不能为空", trigger: "blur" },
        ],
        type: [{ required: true, message: "检查标准不能为空", trigger: "blur" }],
        specification: [
          { required: true, message: "测试方法和要求不能为空", trigger: "blur" },
        ],
      },
      deviceFormShow: false, // 设备编辑弹窗
      dataList: [], //设备页面详情列表
      inspectionShow: false, // 检查项弹窗
      deviceId: "", // 设备ID
    };
  },
  props: {
    value: {
      type: Boolean,
      default: false,
      required: true,
    },
    systemId: {
      type: [String, Number],
      default: "",
    },

  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  watch: {
    value(val) {
      if (val) {
        this.deviceParams.systemId = this.systemId;
        this.deviceParams.pageNum = 1;
        this.getStandard();
      }
    },
  },
  methods: {
    // 取消设备编辑
    deviceCancel() {
      this.deviceFormShow = false;
      this.resetForm("deviceForm");
    },

    // 搜素设备列表
    handleDeviceQuery() {
      this.deviceParams.pageNum = 1;
      this.getList();
    },

    // 查询系统设备列表
    getList() {
      this.loading = true;
      listDevice(this.deviceParams)
        .then((res) => {
          this.dataList = res.rows;
          this.deviceTotal = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 获取标准名称
    getStandardLable(item) {
      let row = this.standardList.find((i) => i.dictValue == item.type);
      return row ? row.dictLabel : "";
    },

    // 检查周期名称
    cycleLabel(val) {
      let row = this.cycleList.find((item) => item.value == val.inspectionCycle);
      return row ? row.label : "";
    },

    // 查看检查项
    handleCheck(row) {
      this.deviceId = row.id;
      this.inspectionShow = true;
    },

    //新增设备按钮操作
    handleAdd() {
      this.deviceForm = {
        id: null,
        name: null,
        inspectionCycle: null,
        maintenanceContent: null,
        // type: null,
        systemId: this.deviceParams.systemId,
      };
      this.deviceFormShow = true;
    },

    //获取国际标准列表
    getStandard() {
      getStandardList({
        dictType: "sys_check_standard",
      }).then((res) => {
        this.standardList = res.rows;
        this.deviceParams.type = res?.rows[0].dictValue;
        this.getList();
      });
    },

    // 编辑设备
    handleEdit(row) {
      this.deviceForm = Object.assign({}, row);
      this.deviceFormShow = true;
    },

    // 删除设备
    handleDelete(row) {
      this.$confirm("是否确认删除名称为'" + row.name + "'的设备?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delDevice(row.id).then(() => {
            this.$modal.msgSuccess("删除成功");
            this.getList();
          });
        })
        .catch(() => { });
    },
    // 提交设备表单
    submitForm() {
      this.$refs.deviceForm.validate((valid) => {
        if (valid) {
          if (this.deviceForm.id) {
            this.deviceForm.type = this.deviceParams.type
            updateDevice(this.deviceForm).then((res) => {
              this.$modal.msgSuccess("修改成功");
              this.deviceFormShow = false;
              this.getList();
            });
          } else {
            postDevice(this.deviceForm).then((res) => {
              this.$modal.msgSuccess("新增成功");
              this.deviceFormShow = false;
              this.getList();
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
